<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>人员工时清单</span>
        <span
          v-if="isConditionSearch === 'fourth'"
          style="float: right; padding: 3px 0; color: red; font-size: 12px"
          type="text"
          >注意事项：筛选项目后，点击搜索按钮
        </span>
      </div>

      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="统计区间">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            size="small"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="isConditionSearch === 'second'" label="部门">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item v-if="isConditionSearch === 'third'" label="日期筛选">
          <el-select v-model="dateValue" placeholder="请选择周/月">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
            重置
          </el-button>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['work:report:uhour']"
          >
            导出
          </el-button>
          <el-button
            v-if="isConditionSearch === 'fourth'"
            type="success"
            icon="el-icon-refresh"
            size="mini"
            @click="drawer = true"
          >
            项目筛选
          </el-button>
        </el-form-item>
      </el-form>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 数据汇总 -->
        <el-tab-pane label="数据汇总" name="first">
          <el-table v-loading="loading" :data="resList" stripe>
            <el-table-column label="序号" align="center" width="50">
              <template slot-scope="scope">
                {{
                  (queryParams.pageNum - 1) * queryParams.pageSize +
                  scope.$index +
                  1
                }}
              </template>
            </el-table-column>
            <el-table-column label="部门" prop="deptName" width="120" />
            <el-table-column label="姓名" prop="nickName" width="100" />
            <el-table-column label="工号" prop="userName" width="120" />
            <el-table-column label="岗位性质" prop="postName" width="120" />
            <el-table-column label="日期" prop="strDate" width="120" />
            <el-table-column
              label="项目合计(H)"
              prop="sumProjectHour"
              width="120"
            />
            <el-table-column :label="item" v-for="item in headers" :key="item">
              <template slot-scope="scope">
                <span
                  v-for="(item2, index2) in scope.row.projectHours"
                  :key="index2"
                >
                  {{ item2[item] }}
                </span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList('first')"
          />
        </el-tab-pane>

        <!-- 部门合计 -->
        <el-tab-pane label="部门合计" name="second">
          <el-table v-loading="loading" :data="resList" stripe>
            <el-table-column label="序号" align="center" width="50">
              <template slot-scope="scope">
                {{
                  (queryParams.pageNum - 1) * queryParams.pageSize +
                  scope.$index +
                  1
                }}
              </template>
            </el-table-column>
            <el-table-column label="部门" prop="deptName" width="120" />
            <el-table-column label="日期" prop="strDate" width="120" />
            <el-table-column
              label="项目合计(H)"
              prop="sumProjectHour"
              width="120"
            />
            <el-table-column :label="item" v-for="item in headers" :key="item">
              <template slot-scope="scope">
                <span
                  v-for="(item2, index2) in scope.row.projectHours"
                  :key="index2"
                >
                  {{ item2[item] }}
                </span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList('second')"
          />
        </el-tab-pane>

        <!-- 日期总计 -->
        <el-tab-pane label="日期总计" name="third">
          <el-table v-loading="loading" :data="resList" stripe>
            <el-table-column label="序号" align="center" width="50">
              <template slot-scope="scope">
                {{
                  (queryParams.pageNum - 1) * queryParams.pageSize +
                  scope.$index +
                  1
                }}
              </template>
            </el-table-column>
            <el-table-column label="日期" prop="strDate" width="120" />
            <el-table-column
              label="项目合计(H)"
              prop="sumProjectHour"
              width="120"
            />
            <el-table-column :label="item" v-for="item in headers" :key="item">
              <template slot-scope="scope">
                <span
                  v-for="(item2, index2) in scope.row.projectHours"
                  :key="index2"
                >
                  {{ item2[item] }}
                </span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList('third')"
          />
        </el-tab-pane>

        <!-- 项目合计 -->
        <el-tab-pane label="项目合计" name="fourth">
          <el-table v-loading="loading" :data="resList" stripe>
            <el-table-column label="序号" align="center" width="50">
              <template slot-scope="scope">
                {{
                  (queryParams.pageNum - 1) * queryParams.pageSize +
                  scope.$index +
                  1
                }}
              </template>
            </el-table-column>
            <el-table-column label="部门" prop="deptName" width="120" />
            <el-table-column label="姓名" prop="nickName" width="100" />
            <el-table-column label="工号" prop="userName" width="120" />
            <el-table-column label="岗位性质" prop="postName" width="120" />
            <el-table-column label="日期" prop="strDate" width="120" />
            <el-table-column
              label="项目合计(H)"
              prop="sumProjectHour"
              width="120"
            />
            <el-table-column :label="item" v-for="item in headers" :key="item">
              <template slot-scope="scope">
                <span
                  v-for="(item2, index2) in scope.row.projectHours"
                  :key="index2"
                >
                  {{ item2[item] }}
                </span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList('fourth')"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-drawer title="筛选项目" :visible.sync="drawer">
      <div class="ml20 mr20">
        <el-card shadow="never">
          <el-checkbox
            border
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="checkedProjects"
            @change="handleCheckedProjectsChange"
          >
            <el-checkbox
              style="margin: 10px"
              v-for="item in projectOptions"
              :label="item.projectCode"
              :key="item.projectCode"
              >{{ item.projectCode }}</el-checkbox
            >
          </el-checkbox-group>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getuhour, optionSelect as getProjects } from '@/api/work/report'
export default {
  name: 'Uhour',
  data() {
    return {
      // tab激活页
      activeName: 'second',
      // 筛选展示
      isConditionSearch: 'second',
      // 筛选项目
      drawer: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params: {
          TabKey: 'second',
          dateType: '',
          deptName: ''
        }
      },
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 动态头
      headers: [],
      // 列表
      resList: [],
      // 日期选择
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 日期范围
      dateRange: '',
      // 日期筛选
      options: [
        {
          value: 'weeks',
          label: '周'
        },
        {
          value: 'moths',
          label: '月'
        }
      ],
      // 日期类型值
      dateValue: 'moths',
      // 部门名称值
      deptName: '',
      // 项目代码选项
      projectOptions: [],
      checkAll: true,
      checkedProjects: [],
      isIndeterminate: true
    }
  },
  created() {
    this.getList('second')
    this.getProjectOptions()
  },
  methods: {
    /** tab点击事件 */
    handleClick(tab, event) {
      // 条件清空
      this.resetCondition()
      if (tab.name === 'first') {
        // 数据总汇
        this.getList('first')
      } else if (tab.name === 'second') {
        // 部门合计
        this.getList('second')
      } else if (tab.name === 'third') {
        // 日期总计
        this.getList('third')
      } else if (tab.name === 'fourth') {
        // 项目合计
        this.getList('fourth')
      }
    },
    /** 搜索 */
    getList(tabkey) {
      console.log(tabkey)
      // 开启遮罩层
      this.loading = true

      if (tabkey === 'first') {
        // 数据总汇
        this.isConditionSearch = 'first'
      } else if (tabkey === 'second') {
        // 部门合计
        this.isConditionSearch = 'second'
        // 部门名称值
        if (this.deptName) {
          this.queryParams.params.deptName = this.deptName
        } else {
          this.queryParams.params.deptName = ''
        }
      } else if (tabkey === 'third') {
        // 日期总计
        this.isConditionSearch = 'third'
        if (this.dateValue) {
          // 日期类型值
          this.queryParams.params.dateType = this.dateValue
        }
      } else if (tabkey === 'fourth') {
        // 项目合计
        this.isConditionSearch = 'fourth'
        if (this.checkedProjects && this.checkedProjects.length > 0) {
          // 日期类型值
          this.queryParams.projectCodeList = this.checkedProjects
        }
      }

      // tab当前页
      this.queryParams.params.TabKey = this.activeName
      // 日期范围
      if (this.dateRange && this.dateRange.length > 0) {
        this.dateRange = this.dateRange.map((e) => this.parseTime(e))
        this.addDateRange(this.queryParams, this.dateRange)
      } else {
        this.addDateRange(this.queryParams, this.dateRange)
      }

      this.queryParams.params['pageNum'] = this.queryParams.pageNum
      this.queryParams.params['pageSize'] = this.queryParams.pageSize
      getuhour(this.queryParams).then((response) => {
        this.resList = response.data.data.rows
        this.total = response.data.data.total
        this.headers = response.data.headers
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      if (this.activeName === 'first') {
        // 数据总汇
        this.getList('first')
      } else if (this.activeName === 'second') {
        // 部门合计
        this.getList('second')
      } else if (this.activeName === 'third') {
        this.getList('third')
      } else if (this.activeName === 'fourth') {
        this.getList('fourth')
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = ''
      this.deptName = ''
      this.dateValue = 'moths'
      this.handleQuery()
    },
    /** 条件清空 */
    resetCondition() {
      this.headers = []
      this.resList = []
      this.dateRange = ''
      this.deptName = ''
      this.dateValue = 'moths'
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        params: {
          TabKey: 'second',
          dateType: '',
          deptName: ''
        }
      }
    },
    /** 项目 */
    getProjectOptions() {
      getProjects().then((response) => {
        this.projectOptions = response.data
        this.handleCheckAllChange(true)
      })
    },
    /** 阶段 全选 */
    handleCheckAllChange(val) {
      let projectCodes = this.projectOptions.map((e) => e.projectCode)
      this.checkedProjects = val ? projectCodes : []
      this.headers = this.checkedProjects
      this.isIndeterminate = false
    },
    /** 项目 选中的数组 */
    handleCheckedProjectsChange(value) {
      this.headers = this.checkedProjects
      let checkedCount = value.length
      this.checkAll = checkedCount === this.projectOptions.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.projectOptions.length
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'work/report/uhourexport',
        {
          ...this.queryParams
        },
        `人员工时清单_${new Date().getTime()}.xlsx`
      )
    }
  }
}
</script>

<style></style>
